<script type="text/javascript" src="__COMMON__/webupload/webuploader.min.js"></script>
<script type="text/javascript">
    function upload_file(fileList,imgPicker,data_photo,img_data){

        var $list = $('#'+fileList);
        //上传图片,初始化WebUploader
        var uploader = WebUploader.create({
         
            auto: true,// 选完文件后，是否自动上传。   
            swf: '__COMMON__/webupload/Uploader.swf',// swf文件路径 
            server: "{:url('Upload/webUploaderImages',['folder' => 'images'])}",// 文件接收服务端。
            duplicate :true,// 重复上传图片，true为可重复false为不可重复
            pick: '#'+imgPicker,// 选择文件的按钮。可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },

            'onUploadSuccess': function(file, data, response) {
                $("#"+data_photo).val(data.data.path);
                $("#"+img_data).attr('src',data.data.path).show();
            }
        });

        uploader.on( 'fileQueued', function( file ) {
            $list.html( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">正在上传...</p>' +
            '</div>' );
        });

        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传成功！');
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错!');
        });
    }
</script>
<!-- 多图片上传 -->
<script type="text/javascript">
    var weitoutiaoPhotoId = [];
    $(function(){
        var $list = $("#thelist");    //初始化
        var thumbnailWidth = 56;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
        var thumbnailHeight = 56;

        var uploader = WebUploader.create({
            auto: true,      // 选完文件后，是否自动上传。

            // swf文件路径
            swf: '__COMMON__/webupload/Uploader.swf',  //

            // 文件接收服务端。
            server: "{:url('Upload/webUploaderImages',['folder' => 'article'])}",// 文件接收服务端。

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            fileNumLimit:9,    //文件最多九个
            threads:1,        //上传并发数。上传多个会出现问题
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            method:'POST',
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {  // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail" style="float:left">' +
                '<img>' +
                '<span title="删除" class="selfmedia_addtemplate_imgDelSpan remove-this" id="span_'+file.id+'" div_id="' + file.id + '">X</span>'+
                //'<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );      // $list为容器jQuery实例

            //删除操作
            $li.on('click', '.remove-this', function() {
                uploader.removeFile( file, true );    //移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。
                var picVal = $("#image").val();
                var delPic = '#'+ $(this).attr("cid");
                console.log(delPic);
                picVal = picVal.replace(delPic,'');
                $("#image").val(picVal);
                console.log($("#image").val());

                helperuser_publish_delWeiToutiaoPicture(this, file.id);
            });

            /** 创建缩略图  如果为非图片文件，可以不用调用此方法。
             thumbnailWidth x thumbnailHeight 为 100 x 100  */
            uploader.makeThumb( file, function( error, src ) {   //webuploader方法
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file, response ) {
            console.log();
            weitoutiaoPhotoId.push(response.data);//累加微头条的图片ID
            var successLi = $('#'+file.id);
            var success = successLi.find('div.success');
            if(!success.length){
                success = $('<div class="success"></div>').appendTo(successLi);
            }
            success.html('<span style="font-size: 12px;color:green">上传成功</span>');
            $('<div id='+file.id+'></div>').appendTo(success);

            //找到  ×  给 × 的data属性赋值，用于删除数组中的文件ID
            var chaSpan = $('#span_'+file.id);    //找到span元素赋data属性
            chaSpan.attr('data', response.data);    //给span加上data属性

            chaSpan.attr('cid',response.data.path);


            var img_y = $("#image").val();
            $("#image").val(img_y + "#" + response.data.path);
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var errorLi = $('#'+file.id);
            var error = errorLi.find('div.success');
            if(!error.length){
                error = $('<div class="success"></div>').appendTo(errorLi);
            }
            error.html('<span style="font-size: 12px;color:red">上传失败</span>');
            $('<div id='+file.id+'></div>').appendTo(error);
        });

    });

    /**
     * @todo删除图片操作
     * @param obj span × 按钮对象
     * @param file_id 整张图片的ID
     */
    function helperuser_publish_delWeiToutiaoPicture(obj, file_id){
        var photo_id = $(obj).attr('data');
        $('#'+file_id).remove();    //移除整张图片样式

        weitoutiaoPhotoId.splice($.inArray(photo_id,weitoutiaoPhotoId),1);    //删除数组的该文件ID
    }

    $(".remove-this").on('click',function(){
        var picVal = $("#image").val();
        var delPic = '#'+ $(this).attr("cid");
        console.log(delPic);
        picVal = picVal.replace(delPic,'');
        $("#image").val(picVal);
        console.log($("#image").val());
        $(this).parent('.thumbnail').remove();
    });

</script>